#{extends 'main.html' /}
#{set title:messages.get('patient.add') /}

<style>
.requiredField {
	font-size: 10px;
    margin-left: 10px;
    color: #222222;
}

.patientValue {
	float: left;
	margin-bottom: 4px;
    padding: 2px 10px;
}

.patientValue input {
 	width: 300px;
    font-family: 'Helvetica','Arial','Sans' !important;
    font-size: 12px !important;
    margin: 0px;
}

.patientValue select {
 	width: 300px;
    font-family: 'Helvetica','Arial','Sans' !important;
    font-size: 12px !important;
    margin: 0px 0px 2px 0px;
}

.hasError {
	color: #C00;
}

#patient_gender {
	width: 305px;
}

.patientInfoContainer {
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #4297D7;
	font-family: 'Helvetica', 'Arial', 'Sans';
	font-size: 12px;
}

.crudButtons {
	background: #EFEFEF;
	border-radius: 10px 10px 10px 10px;
	margin: 0px;
	padding: 10px;
	text-align: center;
	font-size: 12px !important;
	font-family: 'Helvetica','Arial','Sans';
}

.crudButtons input {
    background: #54BD06;
    border: medium none;
    border-radius: 8px 8px 8px 8px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    margin: 0 10px;
    padding: 2px 10px;
    font-family: 'Helvetica','Arial','Sans';
}

.cancelButton {
	background: #54BD06;
    border-radius: 8px 8px 8px 8px;
    color: white !important;
    padding: 3px 10px;
    text-decoration: none;
}

.cancelButton:hover {
	opacity: 0.8;
}
</style>

<script type="text/javascript">
var date;
$(document).ready(function() {
	date = $('#patient_birthday').val();
	var datepicker = '#patient_birthday';
	$.datepicker.setDefaults($.extend({
		minDate: new Date(1900,0,1),
		maxDate: new Date(),
		yearRange: '1900:+00',
		changeMonth: true,
		changeYear: true},
		$.datepicker.regional['']));
	$(datepicker).datepicker();
	%{
		currentLanguage = play.i18n.Lang.get();
	}%
	$(datepicker).datepicker('option', $.datepicker.regional['&{currentLanguage}'.lenght == 0 ? 'en' : '&{currentLanguage}']);
	$(datepicker).datepicker('option', 'dateFormat', 'dd-mm-yy');
	$('#patient_birthday').val(date);
});
</script>

#{if flash.error || error}
   <div class="crudFlash flashError">
       ${error ?: flash.error}
   </div>
#{/if}
<h2 id="patientTitleContainer">&{'patient.add'}</h2>
<div class="patientInfoContainer">
	#{form action:@savePatientWithCard(), id:'creationForm', enctype:'multipart/form-data' }
		#{field 'patient.lastName'}
			<div class="patientLabelValue">
				<div class="patientLabel">
					<label for="patient_lastName">&{'lastName'}</label>
				</div>
				<div class="patientValue">
					<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
					<span class="requiredField">&{'validation.required'}</span>
				</div>
			</div>
		#{/}
		#{field 'patient.firstName'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_firstName">&{'firstName'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
    			<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.middleName'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_middleName">&{'middleName'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
		    	<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.gender'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_gender">&{'gender'}</label>
			</div>
			<div class="patientValue">
				#{select 'patient.gender', id:'patient_gender', value:patient.gender}
					#{option 'MALE'}&{'gender.male'}#{/option}
					#{option 'FEMALE'}&{'gender.female'}#{/option}
				#{/select}
				<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.birthday'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_birthday">&{'birthday'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value?.format()}" class="${field.errorClass}">
		    	<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.country'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_country">&{'country'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
		    	<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.region'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_region">&{'region'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
			</div>
		</div>
		#{/}
		#{field 'patient.district'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_district">&{'district'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
			</div>
		</div>
		#{/}
		#{field 'patient.city'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_city">&{'city'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
		    	<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.street'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_street">&{'street'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
		    	<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.house'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_house">&{'house'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
		    	<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'patient.flat'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="patient_flat">&{'flat'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
		    	<span class="requiredField">&{'validation.numeric'}</span>
			</div>
		</div>
		#{/}
		<p class="crudButtons">
	         <input type="submit" name="_save" value="&{'crud.save'}" />
	         <a href="@{PatientView.patients()}" class="cancelButton">&{'crud.cancel'}</a>
	    </p>
	#{/form}
</div>